<template>
  <div>
    <el-table ref='table' :data="props.tableConfig.dataSource" style="width: 100%">
      <el-table-column type="selection" v-if="columnSelection"></el-table-column>
      <el-table-column type="index" label="#" v-if="columnIndex"></el-table-column>
      <template v-for="(column, ind, key) in props.tableConfig.columns" :key="column">
        <el-table-column v-if="column.scopeVal" :prop="column.prop" :label="column.label" :width="column?.width" 
        :min-width="column?.minWidth" :fixed="column.fixed" :sortable="column.sortable" >
          <template #default="scope" >
            <slot
              :column="column"
              :record="scope.row"
              :text="scope.row[column.prop]"
              :index="props.tableConfig.dataSource.indexOf(scope.row)"
              :name="column.prop"
            >
            </slot>
          </template>
        </el-table-column>

        <el-table-column v-else :prop="column.prop" :label="column.label" :width="column?.width" 
        :min-width="column?.minWidth" :fixed="column.fixed" :sortable="column.sortable" 
        :show-overflow-tooltip="!column.hasOwnProperty('showTooltip') || column.showTooltip"/>
      </template>
    </el-table>

    <div class="hx-pagination-box" v-if="props.pagination">
      <el-pagination v-model:current-page="props.tableConfig.pageNo" v-model:page-size="props.tableConfig.pageSize" :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="props.tableConfig.total" @size-change="sizeChange"
        @current-change="currentChange" background  />
    </div>

  </div>
</template>

<script setup>
import {ref, reactive, computed} from "vue";

const table = ref(null);
const props = defineProps({
  // 响应式的数据放在第2层，需要默认值的放在第1层
  tableConfig: {  
    dataSource: [],                   // 数据源
    columns: [],                      // 每项数据属性
    pageNo: 1,                        // 多层级数据可以直接双向绑定
    pageSize: 10,                      
    total: 0,                         
  },
  columnSelection: {default: true},     // 是否展示勾选框
  columnIndex: {default: true},         // 是否序号
  pagination: {default: true},         // 是否显示分页
});
const emits = defineEmits(['pageChange'])

// const { dataSource, columns } = props.tableConfig;    // 这样的dataSource, columns没有响应性
// 子组件不能改变props的值，如子组件input组件不能绑定v-model="props.inputVal"，因为props是单向流数据。但可以v-model="props.config.inputVal"，我理解是vue3的深度响应数据
checkProps();

// 检查传入的数据
function checkProps(){
  let config = props.tableConfig;
  if (props.pagination) {
    ['pageNo', 'pageSize', 'total'].forEach(attr => {
      if (!config.hasOwnProperty(attr)) {
        console.error(`tableConfig.${attr}不能为空`)
      }
    })
  }
}

// 页码改变触发函数
function currentChange(page) {
  emits('pageChange')
}

// size改变触发函数
function sizeChange() {
  props.tableConfig.pageNo = 1;
  emits('pageChange')
}

// 对外暴露数据
defineExpose({
  table: table,
});
</script>
